<template>
  <section class="QuickRate__container">
    <template v-for="star in items">
      <i
        v-if="star.light"
        :key="star.value"
        class="iconfont icon-xingxing-shi light"
      />
      <i v-else :key="star.value" class="iconfont icon-xingxing-kong" />
    </template>
  </section>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 3,
    },
  },

  watch: {
    value() {
      this.items.map((m) => {
        if (m.value <= this.value) m.light = true;
      });
    },
  },

  data() {
    return {
      items: [
        { value: 1, light: false },
        { value: 2, light: false },
        { value: 3, light: false },
        { value: 4, light: false },
        { value: 5, light: false },
      ],
    };
  },

  mounted() {
    this.items.map((m) => {
      if (m.value <= this.value) m.light = true;
    });
  },
};
</script>

<style lang="scss" scoped>
.QuickRate__container {
  display: flex;
  align-items: center;
  width: 60px;

  i {
    font-size: 1rem;
    color: #b0b0b0;
  }

  .light {
    color: #ff9900;
  }
}
</style>